<template>
  <div>
    <el-form :model="form" :rules="rules" ref="formRef">
      <el-form-item label="实际入库数量" prop="GoNumber" :label-width="formLabelWidth">
        <el-input-number
          placeholder="请输入数量"
          type="number"
          :min="0"
          :max="parseInt(goodNumber)"
          :precision="0"
          :step="1"
          controls-position="right"
          v-model="form.GoNumber"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="入库时间" prop="GoTime" :label-width="formLabelWidth">
        <el-date-picker
          :clearable="false"
          v-model="form.GoTime"
          type="datetime"
          placeholder="选择日期时间"
          value-format="yyyy-MM-dd HH:mm:ss"
        ></el-date-picker>
      </el-form-item>
      <!-- <el-input placeholder="请输入数量" type="number" v-model="form.GoNumber"></el-input> -->

      <el-form-item label="入库备注" prop="GoRemark" :label-width="formLabelWidth">
        <el-input type="textarea" :rows="3" placeholder="请填写备注" v-model="form.GoRemark"></el-input>
      </el-form-item>

      <el-form-item label="损益数量" prop="PLnumber" :label-width="formLabelWidth">
        <el-input type="number" v-model="form.PLnumber" :disabled="true" style="width:30%"></el-input>
        <!-- <el-input placeholder="请输入数量" type="number" v-model="form.PLnumber"></el-input> -->
      </el-form-item>
      <el-form-item label="损益时间" :clearable="false" prop="PLTime" :label-width="formLabelWidth" v-if="show">
        <el-date-picker
          v-model="form.PLTime"
          type="datetime"
          placeholder="选择日期时间"
          value-format="yyyy-MM-dd HH:mm:ss"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="损益备注" prop="PLRemark" :label-width="formLabelWidth" v-if="show">
        <el-input type="textarea" :rows="3" placeholder="请填写备注" v-model="form.PLRemark"></el-input>
      </el-form-item>
      <el-form-item :label-width="formLabelWidth">
        <el-button plain @click="resetForm('formRef')">取消</el-button>
        <el-button type="primary" @click="submitForm('formRef')">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  name: "",
  data() {
     var validate = (rule, value, callback) => {
       console.log(rule)
      if (this.show &&rule.field =="PLTime") {
        if (value === "") {
          callback(new Error("请选择时间"));
        }
      } 
       if (this.show &&rule.field =="PLRemark") {
        if (value === "") {
          callback(new Error("请填写损益备注"));
        }
      } 
      callback();
    };
    return {
      show:false,
      goodNumber: "",
      GoodId: "",
      form: {
        GoTime: "",
        GoNumber: "",
        GoRemark: "",
        PLTime: "",
        PLnumber: "",
        PLRemark: ""
      },
      formLabelWidth: "120px",
      rules: {
        GoTime: [{ required: true, message: "请选择时间", trigger: "blur" }],
        GoNumber: [
          { required: true, message: "请填写实际入库数量", trigger: "blur" }
        ],
        GoRemark: [
          {
            required: true,
            message: "请填写备注",
            trigger: "blur"
          }
        ],
        PLTime: [{ required: true, validator: validate, trigger: "blur" }],
        PLRemark: [
          {
            required: true,
            validator: validate,
            trigger: "blur"
          }
        ]
        // PLTime: [
        //   { required: true, message: "请选择损益时间", trigger: "blur" }
        // ],
        // PLnumber: [
        //   { required: true, message: "请填写损益数量", trigger: "blur" }
        // ],
        // PLRemark: [
        //   {
        //     required: true,
        //     message: "请填写损益备注",
        //     trigger: "blur"
        //   }
        // ]
      }
    };
  },
  props: ["data"],
  components: {},
  computed: {
    getName: function() {
      return this.form.GoNumber;
    }
  },
  beforeMount() {},
  mounted() {
    this.GoodId = this.data.id;
    this.goodNumber = this.data.num;
    this.form.GoNumber =this.data.num;
    console.log(this.data);
  },
  watch: {
    getName: {
      handler: function(val, oldVal) {
        this.form.PLnumber = this.goodNumber - val;
        if(this.form.PLnumber ==0){
          this.show =false;
        }else{
          this.show =true;
        }
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        let message = this.form;
        if (valid) {
          let param = {
            id: this.GoodId,
            inventoryrecordsList: []
          };
          let item = {
            storageTime: message.GoTime,
            num: message.GoNumber,
            remark: message.GoRemark
          };
          let item1 = {
            profitandlossTime: message.PLTime,
            num: message.PLnumber,
            remark: message.PLRemark
          };
          param.inventoryrecordsList.push(item);
          param.inventoryrecordsList.push(item1);
          console.log(param);
          this.$service.insertEnterAndPL(param).then(res => {
            if (res.code == "00000") {
              if (res.data == 1) {
                this.$message({
                  message: "入库数量与损益数量大于进货数量",
                  type: "warning"
                });
              }
              if (res.data == 2) {
                this.$message({
                  message: "入库数量与损益数量小于进货数量",
                  type: "warning"
                });
              }
              if (res.data == 3) {
                this.$message({
                  message: "入库成功",
                  type: "success"
                });
                this.$emit("submit");
                this.$refs[formName].resetFields();
              }
            } else {
              this.$message({
                message: res.message,
                type: "warning"
              });
            }
          });
        }
      });
    },
    resetForm(formName) {
      this.$emit("submit", false);
      this.$refs[formName].resetFields();
    }
  }
};
</script>
<style scoped>
</style>